<?php 
	//error_reporting(E_ALL);
 	//ini_set("display_errors", 1);
 	   
	include_once './templates/display.php';

	Displayer::displayHeader('Shop');
?>

<div class="bodyInscription col">

			<h1> CR&#201;ATION DE MON COMTPE </h1>

			<form name="inscription" id="inscription" method="post" action="classes/form_inscription.php">

				<label id="errorLogin" name="errorLogin" class="tooltipError"></label><br/>
				<input id="login" name="login" type="text" class="champ" placeholder="Pseudo"/>
				<img class="imgError" id="imgLoginState" name ="imgLoginState" src="Images/Icons/ok.png">
				<br/>
				
				<label id="errorPwd" name="errorPwd" class="tooltipError"></label><br/>
				<input id="password" name="password" type="password" class="champ" placeholder="Mot de passe"/>
				<img class="imgError" id="imgPwdState" name ="imgPwdState" src="Images/Icons/ok.png">
				<br/>
				
				<label id="errorAdresse" name="errorAdresse" class="tooltipError"></label><br/>
				<input id="adresse" name="adresse" type="text" class="champ" placeholder="Adresse"/>
				<img class="imgError" id="imgAdresseState" name ="imgAdresseState" src="Images/Icons/ok.png">
				<br/>
				
				<label id="errorVille" name="errorVille" class="tooltipError"></label><br/>
				<input id="ville" name="ville" type="text" class="champ" placeholder="Ville"/>
				<img class="imgError" id="imgVilleState" name ="imgVilleState" src="Images/Icons/ok.png">
				<br/><br/>

                <input type="hidden" name="typeUser" value="Consommateur"/>
				
				<button class="EButton" type="submit">Inscription</button>
				<!--<input type="reset" value="Réinitialiser le formulaire" />-->

			</form>

</div>

		<script>
		(function() { // On utilise une IEF pour ne pas polluer l'espace global
     
			// Fonction de désactivation de l'affichage des messages et des icones.
			
			function desactivateError() {
			
				var label = document.getElementsByTagName('label'),
				labelLength = label.length;
				
				for (var i = 0 ; i < labelLength ; i++) {
					if (label[i].className == 'tooltipError') {
						label[i].style.display = 'none';
					}
				}
				
				var img = document.getElementsByTagName('img'),
				imgLength = img.length;
				
				for (var i = 0 ; i < imgLength ; i++) {
					if (img[i].className == 'imgError') {
						img[i].style.display = 'none';
					}
				}
			
			}

			// Fonctions de vérification du formulaire, elles renvoient « true » si tout est OK
			
			var check = {}; // On met toutes nos fonctions dans un objet littéral
					
			check['login'] = function() {
				var login = document.getElementById('login');
				var errorLogin = document.getElementById('errorLogin');
				var imgLogin = document.getElementById('imgLoginState');
				
				if (login.value.length > 5 && login.value.length <= 50) {
					imgLogin.src  = 'Images/Icons/ok.png';
					imgLogin.style.display = 'inline-block';
					errorLogin.innerHTML  = '';
					errorLogin.style.display = 'none';
					return true;
				} else {	
					imgLogin.src  = 'Images/Icons/ko.png';	
					imgLogin.style.display = 'inline-block';
					errorLogin.innerHTML  = 'La taille du login doit &#234;tre comprise entre 6 et 50 caract&#232;res inclus';
					errorLogin.style.display = 'inline-block';					
					return false;
				}
			
			};
			
			check['password'] = function() {
				var password = document.getElementById('password');
				var errorPassword = document.getElementById('errorPwd');
				var imgPassword = document.getElementById('imgPwdState');
				
				if (password.value.length > 5 && password.value.length <= 20) {
					imgPassword.src  = 'Images/Icons/ok.png';
					imgPassword.style.display = 'inline-block';
					errorPassword.innerHTML  = '';
					errorPassword.style.display = 'none';
					return true;
				} else {
					imgPassword.src  = 'Images/Icons/ko.png';	
					imgPassword.style.display = 'inline-block';
					errorPassword.innerHTML  = 'La taille du mot de passe doit &#234;tre comprise entre 6 et 20 caract&#232;res inclus';
					errorPassword.style.display = 'inline-block';					
					return false;
				}
			};
			
			check['adresse'] = function() {
				var adresse = document.getElementById('adresse');
				var imgAdresse = document.getElementById('imgAdresseState');
				var errorAdresse = document.getElementById('errorAdresse');
				
				if(adresse.value.length > 300){
					imgAdresse.src  = 'Images/Icons/ko.png';	
					imgAdresse.style.display = 'inline-block';
					errorAdresse.innerHTML  = 'La taille de l\'adresse ne doit pas d&#233;passer 300 caract&#232;res';
					errorAdresse.style.display = 'inline-block';
					return false;
				}
				else{
					imgAdresse.src  = 'Images/Icons/ok.png';
					imgAdresse.style.display = 'inline-block';
					errorAdresse.innerHTML  = '';
					errorAdresse.style.display = 'none';
					return true;
					}
			};
			
			
			check['ville'] = function() {
				var ville = document.getElementById('ville');
				var imgVille = document.getElementById('imgVilleState');
				var errorVille = document.getElementById('errorVille');
				
				if(ville.value.length > 50){
					imgVille.src  = 'Images/Icons/ko.png';	
					imgVille.style.display = 'inline-block';
					errorVille.innerHTML  = 'La taille de l\'adresse ne doit pas d&#233;passer 300 caract&#232;res';
					errorVille.style.display = 'inline-block';
					return false;
				}
				else{
					imgVille.src  = 'Images/Icons/ok.png';
					imgVille.style.display = 'inline-block';
					errorVille.innerHTML  = '';
					errorVille.style.display = 'none';
					return true;
					}
			};
				   
			
			// Mise en place des événements
			
			(function() { // Utilisation d'une fonction anonyme pour éviter les variables globales.
			
				var myForm = document.getElementById('inscription'),
					inputs = document.getElementsByTagName('input'),
					inputsLength = inputs.length;
			
				for (var i = 0 ; i < inputsLength ; i++) {
					if (inputs[i].type == 'text' || inputs[i].type == 'password') {
			
						inputs[i].onkeyup = function() {
							check[this.id](this.id); // « this » représente l'input actuellement modifié
						};
			
					}
				}
			
				myForm.onsubmit = function() {
			
					var result = true;
			
					for (var i in check) {
						result = check[i](i) && result;
					}
			
					if (result) {
						//alert('Le formulaire est bien rempli.');
					}
			
					return result;
			
				};
			
			   /*myForm.onreset = function() {
			
					for (var i = 0 ; i < inputsLength ; i++) {
						if (inputs[i].type == 'text' || inputs[i].type == 'password') {
							inputs[i].value = '';
						}
					}

					desactivateError();					
				};*/
			
			})();
			desactivateError();
		})();
	</script>


<?php
	Displayer::displayFooter();
?>